<template>
  <div style="padding: 20px">
    <!-- 功能区域 -->
    <div style="display: flex;">
      <el-button type="primary" @click="add">新增</el-button>

      <el-upload action="/api/api/file.php" :limit="1" style="margin: 0 20px;">
        <el-button type="primary">导入</el-button>
        <template #tip>
          <div class="el-upload__tip">
            上传大小不超过20MB的excel
          </div>
        </template>
      </el-upload>
      <el-button type="primary">导出</el-button>
    </div>
    <!-- 搜索区域 -->
    <div style="margin: 10px 0">
      <el-input
        v-model="search"
        placeholder="输入关键字"
        style="width: 20%"
        clearable
      />
      <el-button type="primary" style="margin: 0 10px" @click="load"
        >搜索</el-button
      >
    </div>
    <!-- 内容 -->
    <el-table :data="tableData" stripe style="width: 1600px; display: flex">
      <el-table-column prop="tch_id" label="编号" sortable="" style="flex: 1" />
      <el-table-column prop="tch_name" label="名字" style="flex: 1" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="确认删除吗?"
            @confirm="handleDelete(scope.row.tch_id)"
          >
            <template #reference @click="handleDelete(scope.row.tch_id)">
              <el-button type="text">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="margin: 10px 0">
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :rules="rules"
        :label-position="labelPosition"
        label-width="100px"
        :model="form"
        style="max-width: 460px"
      >
        <el-form-item label="编号"  prop="tch_id">
          <el-input :disabled="cantChange" v-model="form.tch_id" />
        </el-form-item>
        <el-form-item label="姓名" prop="tch_name">
          <el-input v-model="form.tch_name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="save">Confirm</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Teacher",
  components: {},
  data() {
    return {
      cantChange:true,
      search: "",
      form: {},
      currentPage: 1,
      total: 0,
      pageSize: 10,
      dialogVisible: false,
      tableData: [],
      rules: {
        tch_name: [
          {
            required: true,
            message: "请输入名字",
            trigger: "blur",
          },
        ],
        tch_id: [
          {
            required: true,
            message: "请输入编号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      request
        .get("api/teaView.php", {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            search: this.search,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.code == '-1'){
            this.$router.push('/login')
          }
          else{
            this.tableData = res.data.table;
             this.total = parseInt(res.data.total);
          }
        });
    },
    add() {
      this.cantChange = false;
      this.dialogVisible = true;
      this.form = {
        isAdd: true,
      };
    },
    save() {
      this.$refs["form"].validate((valid) => {
        //数据不合法
        if (valid) {
          request.post("/api/teaAdd.php", this.form).then((res) => {
            console.log(res);
            if (res.code === "0") {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.form["isAdd"] = false;
              this.load();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
          this.dialogVisible = false;
        } else {
          this.$message({
            type: "error",
            message: "请输入完整的登录信息",
          });
        }
      });

      this.dialogVisible = false;
    },
    handleEdit(row) {
      this.cantChange = true;
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    handleDelete(tch_id) {
      console.log(tch_id);
      request
        .delete("api/teaCrash.php", {
          data: {
            tch_id: tch_id,
          },
        })
        .then((res) => {
          if (res.code === "0") {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.load();
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
    },
    handleSizeChange(pageSize) {
      //  改变每页数量
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //  改变页码
      this.currentPage = pageNum;
      this.load();
    },
  },
};
</script>

<style>
</style>
